<template>
  <div>
    <a-tabs type="editable-card" @edit="onTabEdit" hide-add v-model="tab" @change="onTabChange">
      <a-tab-pane v-for="t in list" :key="t.code" :tab="t.code"></a-tab-pane>
      <template #tabBarExtraContent>
        <a-button type="link" @click="add"><i class="fa fa-plus-circle mr5"/>新增模板</a-button>
      </template>
    </a-tabs>
    <div class="scroll" :style="{paddingRight:`10px`,height:`${winHeight-330}px`}">
      <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
        <a-form-item label="基础信息" required>
          <div class="flx-s">
            <ZgInput :width="200" class="mr10" v-model="obj.code" placeholder="模板编码"></ZgInput>
            <ZgSelect :width="200" class="mr10" v-model="obj.type" :options="opts" placeholder="代码类型"></ZgSelect>
            <ZgInput :width="200" class="mr10" v-model="obj.suffix" placeholder="后缀/文件名"></ZgInput>
            <ZgInput :width="200" v-model="obj.subPackage" placeholder="子包"></ZgInput>
          </div>
        </a-form-item>
        <a-form-item label="模板内容" required>
          <ZgCodeMirror ref="code"></ZgCodeMirror>
        </a-form-item>
        <a-form-item label="操作" required>
          <a-button type="primary" class="mr10" @click="save">保存模板</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      opts: [{ value: '1', label: 'Java' }, { value: '2', label: 'Vue' }, { value: '3', label: 'Entity' }],
      tab: '',
      obj: {
        id: '',
        code: '',
        type: '1',
        suffix: '',
        content: '',
        subPackage: ''
      },
      list: []
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    onTabEdit (targetKey, action) {
      if (action === 'remove') {
        const arr = this.list.filter(t => {
          return t.code === targetKey
        })
        if (arr.length > 0) {
          this.confirm(() => {
            this.$http.post('/zg-generator/tmpl/del', [arr[0].id], () => {
              this.search()
            })
          })
        }
      }
    },
    onTabChange (tab) {
      const arr = this.list.filter(t => {
        return t.code === tab
      })
      if (arr.length > 0) {
        this.obj = arr[0]
        this.$refs.code && this.$refs.code.setVal(arr[0].content)
      }
    },
    search () {
      this.$http.get('/zg-generator/tmpl/all', {}, data => {
        this.list = data
        if (data.length > 0) {
          this.obj = data[0]
          this.$refs.code && this.$refs.code.setVal(data[0].content)
          this.tab = data[0].code
        }
      })
    },
    add () {
      this.$http.post('/zg-generator/tmpl/add', {}, () => {
        this.search()
      })
    },
    save () {
      this.obj.content = this.$refs.code.getVal()
      this.$http.post('/zg-generator/tmpl/update', this.obj, () => {
        this.$success({ title: '操作成功' })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item{
  margin-bottom:10px;
}
</style>
